import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Divider } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import FileUpload from '../../components/BatchUpload/Upload';
import Finish from '../../components/BatchUpload/Finish';

@connect(({ serviceconfig, publicdata, loading }) => ({
  uploading: loading.effects['serviceconfig/uploadFileWithProgress'],
  fileId: publicdata.downloadFile.fileId,
  fileName: publicdata.downloadFile.fileName,
  currentStep: serviceconfig.currentStep,
  progressPercent: serviceconfig.progressPercent,
  resultInfo: serviceconfig.resultInfo,
  showProgress: serviceconfig.showProgress,
}))
@Form.create()
class Batch extends React.PureComponent {
  componentDidMount() {
    this.clearModel();
  }

  componentWillUnmount() {
    this.clearModel();
  }

  // 重置model
  clearModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: {
        currentStep: 0,
        progressPercent: 0,
        showProgress: false,
      },
    });
  };

  // 设置当前位置
  setCurrentstep = currentStep => {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: { currentStep },
    });
    if (!currentStep) {
      this.clearModel();
    }
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/uploadFileWithProgress',
      payload: formData,
    })
  };

  render() {
    const isExactDiv = () => (
      <div>
        <Divider dashed style={{ marginTop: 100 }} />
        <p style={{ margin: '0 auto', width: '90%', fontSize: 14, textAlign: 'left' }}>
          说明
          <br />
          1、下载模板中标黄表头为必填项，但是进行批量上传时，必须有产品/险种配置信息。
          <br />
          2、针对五险不合一的地区，不同险种同缴费方式及账户的情况可维护在社保列，不同险种不同缴费方式或不同缴费账户的情况需要按险种进行单独维护，（支持全部单独维护）。
          <br />
          3、针对石家庄地区的业务情况，维护工伤缴纳账户时，需以（大库名称/二级户名称）的格式进行维护。
          <br />
          4、更新服务配置信息的业务情况，可利用导出模板修改后直接导入进行更新。
        </p>
      </div>
    );
    const { uploading, currentStep, showProgress, resultInfo, progressPercent } = this.props;
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <FileUpload
            title="上传文件"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: {},
              url: '/csApi/custService/downloadTemplate',
              type: 'POST',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
            // 展示进度条需要的数据
            progressPercent={progressPercent || 0}
            progressTitle="批量新增"
            progressVisible={showProgress}
            isExact={isExactDiv}
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default Batch;
